<template>
	<view>
		<view class="moreWp">
			<view class="cardWp " v-for="(item,i) in cardList" :key="i" @click="choiceCard(item)">
				<view class="card">
					<view class="imgWp">
						<img :src="item.head" alt="">
					</view>
					<view class="info">
						<view class="name">
							{{item.name}}
						</view>
						<view class="title">
							{{item.position}}
						</view>
						<view class="company">
							{{item.company}}
						</view>
					</view>
					<view class="isDefault" v-if="item.status==0">
						当前名片
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardList: [],
				showMore: false,
			}
		},
		onShow() {
			this.queryCardInfoByOpenId()
		},
		methods: {
			async choiceCard(item) {
				uni.showLoading({
					title:'加载中'
				})
				console.log(item);
				let res = await this.$api.pdateDefaultCard({
					id: item.id
				})
				if (res.success) {
					uni.hideLoading()
					uni.showToast({
						title: '切换成功',
						icon: 'none'
					});
					uni.setStorage({
						key:'cardId',
						data:item.id
					})
					uni.navigateBack({
						
					})
				}else{
					uni.showToast({
						title: '切换失败',
						icon: 'none'
					});
						uni.hideLoading()
				}
			},
			async queryCardInfoByOpenId() {
				uni.getStorage({
					key: 'openId',
					success: async (res) => {
						let payload = {
							openId: res.data.openid
						}
						let res2 = await this.$api.queryCardInfoByOpenId(payload)
						if (res2.success) {
							this.cardList = res2.result.reverse()
							
						} else {
							uni.showToast({
								title: '获取名片列表失败',
								icon: 'none'
							});
							this.cardList = []
						}
					}
				})
			},

			handleMore() {
				this.showMore = true
			},
			closeModel() {
				this.showMore = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.moreWp {
		margin: 30upx;
		.isDefault{
			position: absolute;
			right: 0upx;
			top: 0upx;
			background-color:#655FFE;
			color: #eeeeee;
			font-size: 24upx;
			padding: 20upx;
			border-top-right-radius: 20upx;
		
		}

		.cardWp {
			background: #FFFFFF;
			box-shadow: 0px 1px 4px 0px rgba(66, 60, 254, 0.4);
			border-radius: 30upx;
			margin: 30upx 0;

			.card {
				position: relative;
				padding: 50upx 40upx;
				display: flex;
				align-items: center;

				.imgWp {
					width: 110upx;
					height: 110upx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					margin-left: 30upx;

					.name {
						font-size: 30upx;
						font-weight: 500;
						color: #000000;
						line-height: 36upx;
					}

					.title {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 36upx;
					}

					.company {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 36upx;
					}
				}
			}
		}
	}
</style>
